<template>
  <view class="container">
    <view class="tab-box">
      <view class="tab-item"
            @tap="tapItem"
            data-index="0">
        <view class="item-label"
              :class="{'item-label-active': isShowBox[0]}">本科一批</view>
        <view class="item-line"
              :class="{'item-line-active': isShowBox[0]}"></view>
      </view>
      <view class="tab-item"
            @tap="tapItem"
            data-index="1">
        <view class="item-label"
              :class="{'item-label-active': isShowBox[1]}">本科二批</view>
        <view class="item-line"
              :class="{'item-line-active': isShowBox[1]}"></view>
      </view>
      <view class="tab-item"
            @tap="tapItem"
            data-index="2">
        <view class="item-label"
              :class="{'item-label-active': isShowBox[2]}">高职高专</view>
        <view class="item-line"
              :class="{'item-line-active': isShowBox[2]}"></view>
      </view>
    </view>

    <view class="list-box"
          v-show="isShowBox[0]">
      <view class="list-item"
            v-for="(item,index) in oneList"
            :key="item.matchUniversityId"
            @tap="goUniversityDetail(item.universityId)">
        <view class="university-logo">
          <image :src="staticUrl + item.universityBadge"></image>
        </view>
        <view class="university-name-label">
          <view class="university-name">{{item.universityName}}</view>
          <view class="university-label-box">
            <view class="university-label"
                  v-for="label in item.universityLabels"
                  :key="label.labelId">{{label.labelName}}</view>
          </view>
        </view>
        <view class="university-major">{{item.matchUniversityMajor}}</view>
        <view class="recommend"
              v-if="item.matchUniversityIsRecommend == 1">
          <image src="../../static/images/recommend.png"></image>
        </view>
      </view>
    </view>
    <view v-if="oneList.length <= 0 && isShowBox[0]"
          class="no-data">无匹配学校</view>

    <view class="list-box"
          v-show="isShowBox[1]">
      <view class="list-item"
            v-for="(item,index) in twoList"
            :key="item.matchUniversityId"
            @tap="goUniversityDetail(item.universityId)">
        <view class="university-logo">
          <image :src="staticUrl + item.universityBadge"></image>
        </view>
        <view class="university-name-label">
          <view class="university-name">{{item.universityName}}</view>
          <view class="university-label-box">
            <view class="university-label"
                  v-for="label in item.universityLabels"
                  :key="label.labelId">{{label.labelName}}</view>
          </view>
        </view>
        <view class="university-major">{{item.matchUniversityMajor}}</view>
        <view class="recommend"
              v-if="item.matchUniversityIsRecommend == 1">
          <image src="../../static/images/recommend.png"></image>
        </view>
      </view>
    </view>
    <view v-if="twoList.length <= 0 && isShowBox[1]"
          class="no-data">无匹配学校</view>

    <view class="list-box"
          v-show="isShowBox[2]">
      <view class="list-item"
            v-for="(item,index) in threeList"
            :key="item.matchUniversityId"
            @tap="goUniversityDetail(item.universityId)">
        <view class="university-logo">
          <image :src="staticUrl + item.universityBadge"></image>
        </view>
        <view class="university-name-label">
          <view class="university-name">{{item.universityName}}</view>
          <view class="university-label-box">
            <view class="university-label"
                  v-for="label in item.universityLabels"
                  :key="label.labelId">{{label.labelName}}</view>
          </view>
        </view>
        <view class="university-major">{{item.matchUniversityMajor}}</view>
        <view class="recommend"
              v-if="item.matchUniversityIsRecommend == 1">
          <image src="../../static/images/recommend.png"></image>
        </view>
      </view>
    </view>
    <view v-if="threeList.length <= 0 && isShowBox[2]"
          class="no-data">无匹配学校</view>

    <view class="pop-bg"
          v-show="isShowPopBox"></view>
    <view class="university-pop-box"
          v-show="isShowPopBox">
      <view class="university-pop-content">
        <view class="university-content">您确定要将信息同步到推荐高校的招生办公室吗？若确定，招生办公室近期就会与您联系，请保持通话畅通</view>
        <view class="university-btn-box">
          <view class="university-cancel"
                @tap="hidePopBox">取消</view>
          <view class="university-confirm"
                @tap="hidePopBox">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { myRequest, showToastMsg, serverUrl, staticUrl } from '../../utils'

export default {
  data () {
    return {
      curIndex: 0,
      isShowPopBox: false,
      isShowBox: [true, false, false],
      oneList: [],
      twoList: [],
      threeList: [],
      matchType: 0,
      serverUrl: serverUrl,
      staticUrl: staticUrl
    }
  },

  onLoad (options) {
    this.matchType = options.t
    if (this.matchType == 1) {
      this.isShowPopBox = true
    } else {
      this.isShowPopBox = false
    }
    this.fetchData()
  },

  methods: {

    fetchData () {

      const that = this

      let success = function (res) {

        uni.hideLoading()

        if (res.data.code != 20000) {
          return showToastMsg(res.data.message)
        }

        that.oneList = res.data.data.oneList
        that.twoList = res.data.data.twoList
        that.threeList = res.data.data.threeList

      }

      let param = {
        url: '/intention-test/result',
        data: { matchType: that.matchType }
      }

      uni.showLoading({
        title: '正在加载'
      })
      myRequest(param, success)

    },

    tapItem (e) {
      this.isShowBox[this.curIndex] = false
      this.curIndex = e.currentTarget.dataset.index
      this.isShowBox[this.curIndex] = true
    },

    showPopBox () {
      this.isShowPopBox = true
    },

    hidePopBox () {
      this.isShowPopBox = false
    },

    goUniversityDetail (id) {
      uni.navigateTo({
        url: '/pages/university_detail/university_detail?id=' + id
      })
    }

  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.recommend {
  position: absolute;
  top: 0;
  left: 618rpx;
  opacity: 0.4;
  width: auto;
  height: auto;
}

.recommend image {
  width: 90rpx;
  height: 90rpx;
}

.no-data {
  margin-top: 300rpx;
  font-size: 30rpx;
  color: #666666;
  text-align: center;
}

.tab-box {
  width: 750rpx;
  height: auto;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding-top: 30rpx;
}

.item-line {
  width: 56rpx;
  height: 4rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
}

.item-line-active {
  background-color: #5683ec;
}

.item-label {
  font-size: 28rpx;
  color: #333333;
}

.item-label-active {
  color: #5683ec;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-box {
  width: 750rpx;
  height: auto;
  background-color: #ffffff;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-item {
  position: relative;
  width: 660rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;
  height: 180rpx;
  color: #333333;
  border-bottom: solid 1rpx #f5f5f5;
}

.university-logo {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.university-logo image {
  width: 130rpx;
  height: 130rpx;
}

.university-name-label {
  width: 340rpx;
  margin-left: 20rpx;
}

.university-name {
  font-size: 30rpx;
  margin-top: 40rpx;
}

.university-label-box {
  display: flex;
  flex-direction: row;
  margin-top: 14rpx;
}

.university-label-box {
  display: flex;
  flex-direction: row;
  margin-top: 14rpx;
}

.university-label {
  font-size: 20rpx;
  color: #999999;
  border: solid 1rpx #f5f5f5;
  margin-right: 8rpx;
  padding-left: 12rpx;
  padding-right: 12rpx;
  padding-top: 2rpx;
  padding-bottom: 3rpx;
}

.university-major {
  font-size: 24rpx;
  margin-top: 40rpx;
  color: #666666;
}

.pop-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #000000;
  opacity: 0.5;
}

.university-pop-box {
  width: 750rpx;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.university-pop-content {
  width: 702rpx;
  height: 418rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.university-content {
  width: 598rpx;
  font-size: 30rpx;
  color: #333333;
  margin-top: 80rpx;
  text-align: center;
}

.university-btn-box {
  width: 526rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 60rpx;
}

.university-cancel {
  width: 218rpx;
  height: 72rpx;
  border-radius: 36rpx;
  font-size: 36rpx;
  color: #666666;
  border: solid 2rpx #999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.university-confirm {
  width: 218rpx;
  height: 72rpx;
  border-radius: 36rpx;
  font-size: 36rpx;
  color: #ffffff;
  background-color: #5683ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
